<template>
  <div class="bgff p20">
    <em v-if="0">
      <el-button class="mb20" size="medium" type="primary" @click="addNet">添加菜单</el-button>
      <edit :is_edit="false" ref="createForm" :cur_this="cur_this"></edit>
    </em>
    <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.input" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" >搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
      </el-form-item>
    </el-form>-->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :expand-all="expand"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称" min-width="180"></el-table-column>
      <!-- <el-table-column prop="icon" label="图标" min-width="80px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column> -->
      <el-table-column prop="sort" min-width="100px" label="排序">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.sort }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="path" label="链接地址" />
      <!-- <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" min-width="180" /> -->
      <el-table-column prop="iframe" width="100px" label="内部菜单">
        <template slot-scope="scope">
          <span v-if="!scope.row.iframe">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="创建日期" sortable >
         <template slot-scope="scope">
            {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
          </template>
      </el-table-column>
      <el-table-column label="操作" width="180" v-if="0">
        <template slot-scope="scope">
          <em>
            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <edit :is_edit="true" :cur_this="cur_this" ref="editForm"></edit>
          </em>
          <el-popover :ref="scope.row.id" placement="top" width="120" trigger="click">
            <p class="ptb10 tx-c">确定删除吗？</p>
            <div class="tx-c">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="del(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { _menusList, _menusDelete } from "@/http/ajax";
import edit from "./modul/edit";
export default {
  components: { edit },
  name: "menus",
  data() {
    return {
      loading: false,
      cur_this: this,
      formInline: {
        input: ""
      },
      tableData: [],
      expand:true
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addNet() {
      const _this = this.$refs.createForm;
      _this.dialog = true;
      _this.domInit();
    },
    editClick(row) {
      const _this = this.$refs.editForm;
      _this.dialog = true;
      _this.form = {
        icon: row.icon,
        name: row.name,
        sort: row.sort,
        iframe: row.iframe ? "true" : "false",
        path: row.path,
        component: row.component,
        pid: row.pid,
        id: row.id
      };
      _this.domInit();
    },
    getList() {
      this.tableData = [];
      this.loading = true;
      _menusList(
        res => {
          setTimeout(() => {
            this.loading = false;
            this.tableData = res.content;
          }, 300);
        },
        err => {}
      );
    },
    del(id) {
      _menusDelete(
        id,
        res => {
          this.getList();
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="scss">
</style>
